<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>查询/申请</title>
    <meta name="description" content="网站描述" />
    <meta name="keywords" content="关键词" />
    <link rel="stylesheet" href="./style/reset.css">
    <link rel="stylesheet" href="./style/style.css">
    <link rel="stylesheet" href="./style/flickerplate.css">
</head>
<body>
    <!-- 头部导航 -->
    <div class="wrap_header">
        <div class="head_box">
            <div class="head_navigator">
                <a class="nav_item" href="./index.html">首页</a>
                <a class="nav_item" href="./news.html">新闻中心</a>
                <a class="nav_item" href="">企业资讯</a>
                <a class="nav_item" href="">客服中心</a>
                <a class="nav_item" href="">招聘中心</a>
                <a class="nav_search on" href=""><i class="icon_search"></i>查询/申请</a>
            </div>
            <h1 class="logo"><img src="./images/logo.png"/><span class="title">苏州奇才充电桩</span></h1>
        </div>
    </div>

    <div class="flicker-example" data-block-text="false">
        <ul>
            <li data-background="./images/slide_03.jpg">
            </li>
            <li data-background="./images/slide_02.jpg">
            </li>
            <li data-background="./images/slide_01.jpg">
            </li>
        </ul>
        <div class="slide_mask"></div>
    </div>

    <div class="wrap_main">
        <div class="news_list">
            <div class="news_item">
                <img class="item_pic" src="./images/apply_01.jpg">
                <div class="item_content">
                    <div class="head">
                        <h3 class="title">大客户</h3>
                    </div>
                    <i class="line"></i>
                    <div class="controls">
                        <a href="javascript:void(0);" class="customers_find search_btn">去查询</a>
                        <a href="javascript:void(0);" class="customers_apply apply_btn">去申请</a>
                    </div>
                </div>
            </div>
            <div class="news_item">
                <img class="item_pic" src="./images/apply_02.jpg">
                <div class="item_content">
                    <div class="head">
                        <h3 class="title">巡检</h3>
                    </div>
                    <i class="line"></i>
                    <div class="controls">
                        <a href="javascript:void(0);" class="staff_find search_btn">去查询</a>
                        <a href="javascript:void(0);" class="staff_apply apply_btn">去申请</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 大客户查询 -->
    <div class="mask_wrap customers_model">
        <div class="mask_box">
            <a class="mask_close" href="javascript:void(0);"><img src="./images/icon_close@2x.png"/></a>
            <div class="mask_content">
                <div class="item">
                    <h2 class="item_name">大客户查询</h2>
                    <input class="item_put" name="number" type="text" placeholder="请输入手机号码查询"/>
                </div>
                <div class="mask_btn">
                    <a href="javascript:void(0);" class="mask_sure">查询</a>
                </div>
                <div class="item">
                    <h2 class="item_name">查询结果</h2>
                    <p class="result">审核中</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 大客户申请 -->
    <div class="mask_wrap customers_apply_model">
        <div class="mask_box">
            <a class="mask_close" href="javascript:void(0);"><img src="./images/icon_close@2x.png"/></a>
            <div class="mask_content max_height">
                <div class="item">
                    <h2 class="item_name">手机号码</h2>
                    <input class="item_put" name="phone" type="text" placeholder="手机号码"/>
                </div>
                <div class="item">
                    <h2 class="item_name">密码</h2>
                    <input class="item_put" name="password" type="password" placeholder="密码"/>
                </div>
                <div class="item">
                    <h2 class="item_name">用户名</h2>
                    <input class="item_put" name="username" type="text" placeholder="用户名"/>
                </div>
                <div class="item">
                    <h2 class="item_name">企业名称</h2>
                    <input class="item_put" name="commpany" type="text" placeholder="企业名称"/>
                </div>
                <div class="item">
                    <h2 class="item_name">企业代码</h2>
                    <input class="item_put" name="company_code" type="text" placeholder="企业代码"/>
                </div>
                <div class="item">
                    <h2 class="item_name">银行账号</h2>
                    <input class="item_put" name="bank_account" type="text" placeholder="银行账号"/>
                </div>
                <div class="item">
                    <h2 class="item_name">银行账号对应的开户行</h2>
                    <input class="item_put" name="bank_name" type="text" placeholder="银行账号对应的开户行"/>
                </div>
                <div class="mask_btn">
                    <a href="javascript:void(0);" class="mask_sure">提交</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 巡检人员查询 -->
    <div class="mask_wrap staff_model">
        <div class="mask_box">
            <a class="mask_close" href="javascript:void(0);"><img src="./images/icon_close@2x.png"/></a>
            <div class="mask_content">
                <div class="item">
                    <h2 class="item_name">巡检人员查询</h2>
                    <input class="item_put" name="number" type="text" placeholder="请输入手机号码/身份证号查询"/>
                </div>
                <div class="mask_btn">
                    <a href="javascript:void(0);" class="mask_sure">查询</a>
                </div>
                <div class="item">
                    <h2 class="item_name">查询结果</h2>
                    <p class="result">审核失败：原因_信息填写不准确</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 大客户申请 -->
    <div class="mask_wrap staff_apply_model">
        <div class="mask_box">
            <a class="mask_close" href="javascript:void(0);"><img src="./images/icon_close@2x.png"/></a>
            <div class="mask_content max_height">
                <div class="item">
                    <h2 class="item_name">手机号码</h2>
                    <input class="item_put" name="phone" type="text" placeholder="手机号码"/>
                </div>
                <div class="item">
                    <h2 class="item_name">姓名</h2>
                    <input class="item_put" name="name" type="text" placeholder="姓名"/>
                </div>
                <div class="item">
                    <h2 class="item_name">身份证号码</h2>
                    <input class="item_put" name="" type="text" placeholder="身份证号码"/>
                </div>
                <div class="item">
                    <h2 class="item_name">单位名称</h2>
                    <input class="item_put" name="commpany" type="text" placeholder="单位名称"/>
                </div>

                <div class="item_file">
                    <div class="file_put">
                        <div class="file_list">
                            <!-- 上传之后替换 -->
                            <img class="pic" src="./images/icon_avatar.png"/>
                            <input class="file" name="avatar" type="file">
                        </div>
                    </div>
                    <span class="name file_name">头像：</span>
                </div>

                <div class="item_file">
                    <div class="file_put">
                        <div class="file_list">
                            <i class="icon_close"></i>
                            <img class="pic" src="./images/drive.jpg"/>
                        </div>
                        <div class="file_list">
                            <img class="pic" src="./images/icon_file.png"/>
                            <input class="file" name="avatar" type="file">
                        </div>
                    </div>
                    <span class="name file_name">身份证照片（正反面）：</span>
                </div>

                <div class="item_file">
                    <div class="file_put">
                        <div class="file_list">
                            <!-- 上传之后替换 -->
                            <img class="pic" src="./images/icon_file.png"/>
                            <input class="file" name="avatar" type="file">
                        </div>
                    </div>
                    <span class="name file_name">电工证：</span>
                </div>

                <div class="item_file">
                    <div class="file_put">
                        <!-- <p class="info">普通职工</p> -->
                        <div class="select_item">
                            <select name="" id="" dir="rtl">
                                <option value="1">普通职工</option>
                                <option value="1">普通职工</option>
                                <option value="1">普通职工</option>
                                <option value="1">普通职工</option>
                            </select>
                        </div>
                    </div>
                    <span class="name">级别：</span>
                </div>
                <div class="item_file">
                    <div class="file_put">
                        <input class="info_input" name="" id="city" type="text" placeholder="请选择" autocomplete="off" readonly="true"/>
                    </div>
                    <span class="name">管辖区域：</span>
                </div>
                <div class="item_file">
                    <div class="file_put">
                        <p class="info">15698456236</p>
                    </div>
                    <span class="name">紧急联络电话：</span>
                </div>
                
                <div class="mask_btn">
                    <a href="javascript:void(0);" class="mask_sure">提交</a>
                </div>
            </div>
        </div>
    </div>

    <div class="wrap_footer">
        <div class="footer_main clearfix">
            <div class="footer_code">
                <img src="./images/code.png">
                <p class="tip">扫码下载APP，优惠多多</p>
            </div>
            <div class="footer_info">
                <p>苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语</p>
                <p>苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语</p>
            </div>
        </div>
        <p class="website_info">Copyringht 2018苏州充电桩 ｜<span>All rights reserved</span><span>ICP备：CZ0001234567</span></p>
    </div>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/modernizr-custom-v2.7.1.min.js"></script>
    <script src="./js/flickerplate.min.js"></script>
    <script src="./js/jquery.nicescroll.js"></script>

    <script src="./js/popt.js"></script>
    <script src="./js/city.json.js"></script>
    <script src="./js/citySet.js"></script>

    <script>

        $("#city").click(function (e) {
            SelCity(this,e);
        });


        $('.flicker-example').flicker({
            arrows: true,
            arrows_constraint: false,
            auto_flick: true,
            auto_flick_delay: 4,//秒
            block_text: true,
            dot_navigation: true,
            dot_alignment: 'center',
            flick_animation: 'transition-slide',
            flick_position: 1,
            inner_width: false,
            theme: 'light'
        });

        // 关闭弹窗
        $('.mask_close').click(function(){
            $(this).parents('.mask_wrap').hide();
            $(document).find('#ascrail2000').hide();
            $(document).find('#ascrail2001').hide();
        });

        //大客户查询
        $('.customers_find').click(function(){
            $('.customers_model').show();
        });
        //申请大客户
        $('.customers_apply').click(function(){
            $('.customers_apply_model').show();
            $(document).find('#ascrail2000').show();
        })

        //巡检人员查询
        $('.staff_find').click(function(){
            $('.staff_model').show();
        });

        //巡检人员申请
        $('.staff_apply').click(function(){
            $('.staff_apply_model').show();
            $(document).find('#ascrail2001').show();
        })

        $('.max_height').niceScroll({
            cursorcolor: "#ccc",
            cursoropacitymax: 1, 
            touchbehavior: false, 
            cursorborder: "0", 
            cursorborderradius: "5px",
            autohidemode: true
        });

    </script>
            
</body>
</html>